<template>
  <div class="header">
    <el-row
      :gutter="20"
      class="panel-group"
    >
      <el-col
        :span="12"
        class="card-panel-col"
      >
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon
              icon-class="peoples"
              class-name="card-panel-icon"
            />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">虚拟开号数量</div>
            <count-to
              :start-val="0"
              :end-val="this.indexData"
              :duration="2600"
              class="card-panel-num"
            />
          </div>
        </div>
      </el-col>
      <el-col
        :span="12"
        class="card-panel-col"
      >
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon
              icon-class="message"
              class-name="card-panel-icon"
            />
          <!-- <svg t="1638933972640" icon-class="message"  class="icon card-panel-icon" viewBox="0 0 1168 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="649" width="200" height="200"><path d="M1168.245727 814.095654v46.340891c0 89.569345-77.693554 162.176815-173.522996 162.176816H920.360764c-95.838573 0-173.522996-72.60747-173.522996-162.176816v-46.340891c0-81.708678 64.634619-149.301809 148.73437-160.537111v-94.322793H275.859078v94.322793c84.090619 11.235302 148.731761 78.828433 148.73176 160.537111v46.340891c0 89.569345-77.69225 162.176815-173.522996 162.176816h-74.360662c-95.841182 0-173.522996-72.60747-173.522997-162.176816v-46.340891c0-81.708678 64.633315-149.301809 148.731761-160.537111v-117.492586c0-51.184346 44.390726-92.673957 99.151898-92.673957h260.274711V370.153172c-77.954446-15.915699-136.331577-80.808601-136.331577-158.452586v-46.331761c0-89.577172 77.681814-162.184642 173.522996-162.184642h74.360662c95.830746 0 173.522996 72.606166 173.522997 162.184642v46.333065c0 85.680754-71.086471 155.835842-161.131944 161.775042v69.913764H920.360764c54.761172 0 99.151898 41.48961 99.151898 92.672652v117.49389c84.091924 11.235302 148.733065 78.828433 148.733065 160.537111zM672.477106 165.37013c0-25.596087-22.20319-46.340892-49.581167-46.340892h-74.360663c-27.385804 0-49.582471 20.744805-49.582471 46.340892v46.333065c0 25.596087 22.196668 46.340892 49.582471 46.340892h74.360663c27.377977 0 49.581167-20.744805 49.581167-46.340892v-46.333065zM300.650313 814.095654c0-25.589564-22.20319-46.342196-49.581167-46.342197h-74.360662c-27.385804 0-49.582471 20.753936-49.582471 46.342197v46.340891c0 25.586955 22.196668 46.331761 49.582471 46.331761h74.360662c27.377977 0 49.581167-20.744805 49.581167-46.331761v-46.340891z m743.653585 0c0-25.589564-22.20319-46.342196-49.581167-46.342197H920.360764c-27.384499 0-49.579862 20.753936-49.579862 46.342197v46.340891c0 25.586955 22.195363 46.331761 49.579862 46.331761h74.361967c27.377977 0 49.581167-20.744805 49.581167-46.331761v-46.340891z" fill="#2F63BB" p-id="650"></path></svg> -->
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">使用率(%)</div>
            <!-- indexData.sendNum -->
            <count-to
              :start-val="0"
              :end-val=" this.everc"
              :decimals="2"
              :duration="3000"
              class="card-panel-num"
            />
          </div>
        </div>
      </el-col>
    <!-- <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" >
        <div class="card-panel-icon-wrapper icon-money">
          <svg-icon icon-class="email" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            绑定卡数量
          </div>
          <count-to :start-val="0" :end-val="indexData.bindNum" :duration="3200" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="clipboard" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            台区数量
          </div>
          <count-to :start-val="0" :end-val="indexData.orgNum" :duration="3600" class="card-panel-num" />
        </div>
      </div>
    </el-col> -->
    </el-row>
  </div>
</template>

<script>
// 数字滚动组件
import CountTo from 'vue-count-to'
// import request from "@/utils/request";
import { getVirtualNum, getUsePercent } from '@/api/echarts'
export default {
  components: {
    CountTo
  },
  data() {
    return {
      indexData: null,
      everc: null
    }
  },
  created() {
    this.getVirtualNum()
    this.getUsePercent()
  },
  methods: {
    // 开号数量
    getVirtualNum() {
      getVirtualNum().then((res) => {
        // console.log(res.data.virtualNum);
        this.indexData = Number(res.data.virtualNum)
      })
    },
    // 使用率
    getUsePercent() {
      getUsePercent().then((res) => {
        this.everc = res.data.usePercent
        let aa = this.everc
        aa = aa.substr(0, 5)
        this.everc = Number(aa)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3;
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}
.icon {
  // height: 50px;
  // width: 50px;
}
@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
.card-panel {
  display: flex;
  justify-content: space-between;
}
// .header {
//   padding-top: 10px;
// }
</style>
